<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh">

<head>
    <!-- title of site -->
    <title>注册</title>
    <%@include file="../common/common.jsp"%>
</head>

<body>
<div class="container">
    <div class="sign-content">
        <h2>注册</h2>
        <form action="<%=path%>/Consumer/insert" method="post">
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="nickName">昵称：</label>
                        <input type="text" class="form-control" id="nickName" name="nickName" placeholder="输入昵称！">
                    </div>
                    <!--/.form-col1 -->
                    <div class="form-group">
                        <label for="consumerEmail">邮箱：</label>
                        <input type="email" class="form-control" id="consumerEmail" name="consumerEmail" placeholder="输入邮箱！">
                    </div>
                    <!--/.form-group -->
                    <div class="form-group">
                        <label for="consPassword">密码：</label>
                        <input type="password" class="form-control" id="consPassword" name="consPassword"
                               placeholder="输入密码！">
                    </div>
                    <!--/.form-group -->
                    <div class="form-group">
                        <label for="repassword">确认密码：</label>
                        <input type="password" class="form-control" id="repassword" name="repassword"
                               placeholder="确认密码！">
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="signin-footer">
                        <button type="submit" class="btn signin_btn">
                            注册
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('form').bootstrapValidator({

            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                nickName: {
                    validators: {
                        notEmpty: {
                            message: '昵称不能为空'
                        }
                    }
                },
                consumerEmail: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        },
                        threshold: 2,//有2字符以上才发送ajax请求
                        remote: {//ajax验证。server result:{"valid",true or false}
                            url: CONTEXT_PATH+"/Consumer/validEmail",
                            message: '邮箱已存在,请重新输入',
                            delay: 2000,//ajax刷新的时间是1秒一次
                            type: 'POST',
                            //自定义提交数据，默认值提交当前input value
                            data: function (validator) {
                                return {
                                    emailVal: $("#consPassword").val(),
                                };
                            }
                        }
                    }
                },
                consPassword: {
                    message: '密码无效',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '用户名长度必须在6到30之间'
                        },
                    }
                },
                repassword: {
                    message: '密码无效',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: '用户名长度必须在6到30之间'
                        },
                        identical: {//相同
                            field: 'consPassword',//需要进行比较的input name值
                            message: '两次密码不一致'
                        },
                    }
                },
            }
        });
    });
</script>
</body>
<style>
    [placeholder]:focus::-webkit-input-placeholder {
        -webkit-transition: opacity 0.3s 0.3s ease;
        -moz-transition: opacity 0.3s 0.3s ease;
        -ms-transition: opacity 0.3s 0.3s ease;
        -o-transition: opacity 0.3s 0.3s ease;
        transition: opacity 0.3s 0.3s ease;
        opacity: 0;
    }

    .sign-content {
        max-width: 620px;
        margin: 0 auto;
    }

    .sign-content h2 {
        color: #464d5f;
        font-size: 36px;
        text-align: center;
    }

    .btn.signin_btn,
    .btn.signin_btn:focus {
        width: 620px;
        padding: 0;
        height: 60px;
        background: #5a84fd;
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        border-radius: 3px;
        box-shadow: 0 5px 30px rgba(0, 66, 255, .3);
        margin-top: 23px;
    }
</style>

</html>